<template>
  <a-modal width="30%" v-bind:visible="isShowEdit" title="编辑" @ok="handleOk" @cancel="onCancel">
    <a-spin :spinning="loading">
      <a-form-model ref="formRef" :rules="ruleForm" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
        <a-form-model-item label="真实姓名" prop="owner">
          <a-input v-model="form.owner" placeholder="请输入真实姓名"></a-input>
        </a-form-model-item>
        <a-form-model-item label="预留手机号" prop="mobile">
          <a-input v-model="form.mobile" placeholder="请输入预留手机号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="银行卡号" prop="no">
          <a-input v-model="form.no" placeholder="请输入银行卡号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="银行名称" prop="belong">
          <a-input v-model="form.belong" placeholder="请输入银行名称"></a-input>
        </a-form-model-item>
        <a-form-model-item label="审核状态" prop="state">
          <a-select style="width: 100%; margin-right: 2%" placeholder="请选择审核状态" v-model="form.state">
            <a-select-option v-for="item in type" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="详细地址" prop="province_id">
          <a-select
            style="width: 32%; margin-right: 2%"
            placeholder="省"
            v-model="form.province_id"
            @change="changeProvince"
          >
            <a-select-option v-for="item in province" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-select style="width: 32%; margin-right: 2%" placeholder="市" v-model="form.city_id" @change="changeCity">
            <a-select-option v-for="item in city" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-select style="width: 32%" placeholder="区" v-model="form.area_id">
            <a-select-option v-for="item in area" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="支行名称" prop="branch">
          <a-input v-model="form.branch" placeholder="请输入支行名称"></a-input>
        </a-form-model-item>
        <a-form-model-item label="街道名称" prop="address">
          <a-input v-model="form.address" placeholder="请输入街道"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getProvinceAPI, getCityAPI, getAreaAPI, editCardAPI } from '@/api/userinfo.js'
export default {
  name: 'EditCard',
  props: {
    isShowEdit: {
      type: Boolean,
      default: false
    },
    object: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    async isShowEdit(boolean) {
      if (boolean) {
        try {
          console.log(this.object, 123)
          this.loading = true
          const res = await getProvinceAPI()
          this.province = res.data
          this.form.id = this.object.id
          this.form.owner = this.object.owner
          this.form.mobile = this.object.mobile
          this.form.no = this.object.no
          this.form.belong = this.object.belong
          this.form.state = this.object.check_state
          this.form.branch = this.object.branch
          this.form.province_id = this.object.province_id
          const city = await getCityAPI({ pid: this.form.province_id })
          this.city = city.data
          this.form.city_id = this.object.city_id
          const area = await getAreaAPI({ pid: this.form.city_id })
          this.area = area.data
          this.form.area_id = this.object.area_id
          this.form.address = this.object.address
        } finally {
          this.loading = false
        }
      } else {
        this.$refs.formRef.resetFields()
      }
    }
  },
  data() {
    return {
      type: [
        { id: 0, name: '未审核' },
        { id: 1, name: '通道审核中' },
        { id: 10, name: '审核成功' },
        { id: 20, name: '审核失败' }
      ],
      loading: false,
      province: [],
      city: [],
      area: [],
      form: {
        id: '',
        owner: '',
        mobile: '',
        no: '',
        state: undefined,
        belong: '',
        branch: '',
        province_id: undefined,
        city_id: undefined,
        area_id: undefined,
        address: ''
      },
      ruleForm: {
        owner: [{ required: true, message: '请输入真实姓名' }],
        mobile: [{ required: true, message: '请输入预留手机号' }],
        no: [{ required: true, message: '请输入银行卡号' }],
        belong: [{ required: true, message: '请输入银行名称' }],
        branch: [{ required: true, message: '请输入支行名称' }],
        state: [{ required: true, message: '请输入选择审核状态' }],
        province_id: [{ required: true, message: '请选择省份' }],
        city_id: [{ required: true, message: '请选择城市' }],
        area_id: [{ required: true, message: '请选择区域' }],
        address: [{ required: true, message: '请输入街道名称' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          this.loading = true
          if (this.form.state === 0) {
            this.form.state = '00'
          }
          await editCardAPI(this.form)
          this.$emit('upload')
          this.$refs.formRef.resetFields()
          this.$emit('update:isShowEdit', false)
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        } finally {
          this.loading = false
        }
      })
    },
    onCancel() {
      this.$refs.formRef.resetFields()
      this.$emit('update:isShowEdit', false)
    },
    async changeProvince() {
      const result = await getCityAPI({ pid: this.form.province_id })
      this.city = result.data
      this.form.city_id = undefined
      this.form.area_id = undefined
    },
    async changeCity() {
      const result = await getAreaAPI({ pid: this.form.city_id })
      this.area = result.data
      this.form.area_id = undefined
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
</style>
